<template>
  <div class="">
    <!-- 文章 -->
    <xhsj id="hb" :dx="dx"></xhsj>

    <!-- 评论列表 -->
    <index
      ref="pllblist"
      :APIss="APIss"
      :article_id="article_id"
      :user_id="user_id"
    >
      <template v-slot="{ dx }">
        <pllist @djhf="djhf" @dj="dj" :dx="dx"></pllist>
      </template>
      <!-- <template #aa="{dx}">
    <pllist :dx="dx"></pllist>
    </template> -->
      <template #finished="{ cd }">
        <div>
          <div v-if="cd === 0">
            <van-empty
              class="custom-image"
              image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
              description="没人评论，快抢沙发"
            />
          </div>
          <div style="margin: 0 0 20px 0" v-else>没有更多了~~~</div>
        </div>
      </template>
    </index>

    <!-- 写评论底部 -->
    <djpl
    @fxhb="fxhb"
      @djjj="djjj"
      :csy="csy"
      :reply_comment_id="reply_comment_id"
      :comment_type="comment_type"
      :placeholder="placeholder"
      ref="dbplzj"
      :dx="dx"
      :user_id="user_id"
      :article_id="article_id"
    ></djpl>


<!-- 回复人的评论然后显示 -->
    <van-popup
      v-model="hflistshow"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '60%' }"
      style="border-radius: 20px"
    >
      <div class="tobu">{{hflistbus.reply_num}}条评论</div>

      <div class="fud">
        <div>
          <img class="tp" :src="hflistbus.info?.avatar" />
        </div>
        <div>
          <div style="font-size: 15px;">
            {{ hflistbus.info?.nickname }}
          </div>
          <div style="font-size: 14px;margin: 4px 0" class="nr">
            {{ hflistbus.content }}
          </div>
          <div>
            <span style="font-size: 15px;color: rgb(220,220,220)">{{ hflistbus.create_time }}</span>
            <span class="reqly"> {{ hflistbus.reply_num }}回复 </span>
          </div>
        </div>
        <div class="dz">
          <van-icon
            :color="hflistbus.is_like ? 'red' : '#999'"
            name="good-job"
            @click="dj({
                comment_id:hflistbus._id,
                sy:hflistbus.sy,
                is_like:hflistbus.is_like

            })"
          />{{ hflistbus.like_count > 0 ? hflistbus.like_count : "" }}
        </div>
      </div>
     
     <div>
         <index 
    
      :APIss="APIss2"
      :article_id="article_id"
      :reply_comment_id="reply_comment_id"
      :key="indexkeygx"
    >
    <!-- 刷新组件给组件加一个 :key 值 只要key值变化 就会更新组件 解决 点击那个就是那个的 问题 解决有缓存的问题 v-if 和 v-show -->
      <template v-slot="{ dx }">
        <pllist :hfyc="true" ref="plbj" :bj="true" @djhf="djhf" @dj="dj" :dx="dx"></pllist>
      </template>
      <template #finished="{ cd }">
        <div>
          <div v-if="cd === 0">
            <van-empty
              class="custom-image"
              image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
              description="没人评论，快抢沙发"
            />
          </div>
          <div style="margin: 0 0 20px 0" v-else>没有更多了~~~</div>
        </div>
      </template>
    </index>
    <djpl
      @djjj="djjj"
      :csy="csy"
      :reply_comment_id="reply_comment_id"
      :comment_type="comment_type"
      :placeholder="placeholder"
      ref="dbplzj"
      :dx="dx"
      :user_id="user_id"
      :article_id="article_id"
      :ifbj="true"
    ></djpl>
     </div>

    </van-popup>
  </div>
</template>

<script>
// import {wzxqsj} from '@/api/wzxq'
import html2canvas from 'html2canvas';   //海报
import djpl from '@/views/wzwzwz/djpllist/plsj.vue'
import pllist from '@/views/wzwzwz/pl/pllist.vue'
import index from '@/components/ggdage/index.vue'
import {ppll as APIss,hflblist as APIss2} from '@/api/pl'
import sj from '@/views/wzwzwz/sj.js'                  //混入  
import xhsj from '@/views/wzwzwz/xhsj.vue'
import { renplqxdz, renpldz} from '@/api/dzqx'
export default {
    name:'Article',
    mixins:[sj],                //混入关键字
    data() {
        return {
            APIss,
            APIss2,
            placeholder:'请输入留言',               //请输入留言先子传父 然后父串子  回复
            comment_type:0,           //0是回复文章  1是回复人 的评论   也是先子传父 然后父传子  
           reply_comment_id:'',         //comment_type是  0 的时候可以为空  1  的时候为_id 也就是子传父传过来里面的 sj 里面的_id
           csy:0,
           hflistshow:false,       //弹出层是隐藏
           hflistbus:{},       //创建一个空的对象回复数据
           indexkeygx:0       //刷新组件 给组件加一个 :key 值 只要key值变化 就会更新组件 解决 点击那个就是那个的 问题 解决有缓存的问题 v-if 和 v-show
        }
    },
    components:{
        xhsj,
        index,
        pllist,
        djpl
    },
    mounted(){
        console.log(this.$refs.pllblist.dx)
        console.log(this.$refs.dbplzj)

        // let {csy} = this
        this.$bus.$on('mgxcd',(csy)=>{
          let listdx= this.$refs.dbplzj.dx
          listdx.comment++   
          this.hflistshow=true     
          this.indexkeygx++
          let sllist= this.$refs.pllblist.dx
          sllist[csy].reply_num++
          this.hflistbus.reply_num=sllist[csy].reply_num
        })
    },
    methods:{
      fxhb(){
        let el=document.getElementById('hb')
        html2canvas(el,{
           allowTaint:true,
           useCORS:true
        }).then(function(canvas) {
  //  console.log(canvas.toDataURL())        //toDataURL()生成图片
         let ctx=canvas.getContext('2d')
   let img=new Image()
   img.src=require('@/assets/12.jpg')
   img.onload=function(){
        ctx.drawImage(img,0,0,632,632,30,30,63,63)
        let url=canvas.toDataURL('image/jpg')
        console.log(url)
   }
});
      },
        dj({comment_id,is_like,sy,bj}){
// console.log(comment_id,is_like)
          if(this.DjsFdlyz()===false){
           return
        }
        let api = is_like ? renplqxdz : renpldz
        console.log(this.$parent)               //拿到父组件所以数据$parent
        api({
            comment_id, user_id:this.user_id
        }).then(res => {
            this.$toast(res.msg)
            console.log(res)
            if (res.code == 0) {
                //  if(bj){
                //  this.$refs.pllblist.dx=this.$refs.plbj.dx
                //  }else{
                //    this.$refs.pllblist.dx=this.$refs.pllblist.dx
                //  }
               this.$refs.pllblist.dx[sy].is_like=!is_like
               this.$refs.pllblist.dx[sy].like_count=res.count
               this.hflistbus.is_like=!is_like
               this.hflistbus.like_count=res.count
               

            //    console.log(ths.hflistbus.like_count)
            //    if(this.$refs.pllblist.dx[sy].is_like){
            //      this.$refs.pllblist.dx[sy].like_count=1
            //    }else{
            //     this.$refs.pllblist.dx[sy].like_count=0
            //    }

            }
        })
        },
         djhf({sj}){
          this.indexkeygx++    // 刷新组件 给组件加一个 :key 值 只要key值变化 就会更新组件 解决 点击那个就是那个的 问题 解决有缓存的问题 v-if 和 v-show
            console.log(sj)
            this.hflistbus=sj                //自定义一个空对象 在data 里面 让这个自定义对象做一个传递的作用 然后自定义对象就等于
            // console.log(this.hflistbus.info)  子传父传过来的数据 然后那个点击回复 如果没人回复那就先回复 回复完 this.hflistshow就等于true
            // console.log(this.hflistbus.content) 然后这个自定义的对象 里面就有数据 然后把他渲染到里面  在最后一个  回复人的评论
            console.log(this.hflistbus)
            // console.log(this.hflistbus.info.avatar)

            let {reply_num,info:{nickname},_id:reply_comment_id,sy}=sj
            //  this.hflistbus=sj             //创建的空对象就等于点击那个是就是那个的数据的所有数据
            console.log(reply_num)
            console.log(sy)

            if(reply_num==0){          //点击之后如果reply_num（回复）等于 0 那么就执行下面的
              this.$refs.dbplzj.popxs=true;
              console.log(this.$refs.dbplzj.popxs)
              //  this.hflistbus=sj
            //   this.placeholder='回复:'+nickname;
            //   this.comment_type=1;                       //  1  就是回复人的评论 0 就是回复文章的评论
            //   this.reply_comment_id=reply_comment_id;     //只有上面等于 1 才用定于 传参 参： 就是 _id
              this.csy=sy;
            //   let dszx=this.$refs.pllblist.dx
              // this.hflistbus=                          //this.$refs.pllblist.dx[sy]      //可以加也可以不加
              // {
              //   sy,
              //   ...this.$refs.pllblist.dx[sy]
              // }      //因为数据有很多所以要把传索引传过去才能++知道点击的那一条数据
              //  console.log(this.hflistbus)
            }
            if(reply_num>0){
                this.hflistshow=true
                // this.hflistbus=sj   
                //  this.hflistbus={
                //     sy,
                //     ...this.$refs.pllblist.dx[sy]
                //  }
                //  console.log(this.hflistbus)
            }
             this.hflistbus={
                    sy,
                    ...this.$refs.pllblist.dx[sy]
                 }
                 console.log(this.hflistbus)
            this.placeholder='回复:'+nickname;
              this.comment_type=1;                       //  1  就是回复人的评论 0 就是回复文章的评论
              this.reply_comment_id=reply_comment_id;     //只有上面等于 1 才用定于 传参 参： 就是 _id
              this.csy=sy;
            
    },
    djjj(a){
        this.comment_type=0
        this.reply_comment_id=''
    this.placeholder="请输入留言"
    }
  
    },
   
//     data() {
//         return {
//             // article_id:this.$route.query.id
//         }
//     },
// computed:{
//     article_id(){
//         return this.$route.query.id
//     },
//     user_id(){
//         return this.$store.state.mkhuser.uid
//     }
// },
// created(){
// this.xq()
// },
// methods:{
//     xq(){
//         wzxqsj({
//            article_id:this.article_id,
//            user_id:this.user_id
//         }).then(res=>{
//             console.log(res)
//         })
//     }
// }
}
</script>

<style scoped>
.tobu {
  text-align: center;
  margin: 17px 0 0 0;
}
.tp {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  margin: 0 10px 0 0;
}
.fud {
  display: flex;
  margin: 20px 5px 10px 5px;
}
.reqly {
  border: 1px solid rgb(220, 220, 220);
  border-radius: 20px;
  padding: 2px 7px 2px 3px;
  margin: 0 0 0 10px;
  font-size: 13px;
}
.active {
  color: red;
}
.dz {
  margin: 22px 0 0 50px;
}
.nr {
  width: 200px;
}
.act {
  transition: all 3s;
  animation: dhmz 5s ease;
}
</style>